import React, { useRef, useEffect, useState } from "react";
import moment from "moment";
import Tick from "@pqina/flip";
import "@pqina/flip/dist/flip.min.css";

export const Flip = ({ value }) => {
  const divRef = useRef();
  const tickRef = useRef();

  useEffect(() => {
    const currDiv = divRef.current;
    const didInit = tick => {
      tickRef.current = tick;
    };

    Tick.DOM.create(currDiv, {
      value,
      didInit,
      repeat: true,
    });

    return () => Tick.DOM.destroy(tickRef.current);
  });

  useEffect(() => {
    if (tickRef.current) {
      tickRef.current.value = value;
    }
  }, [value]);

  return (
    <div ref={divRef} className="tick">
      <div data-repeat="true">
        <span data-view="flip">Tick</span>
      </div>
    </div>
  );
};

export const Clock = () => {
  const divRef = useRef();
  const tickRef = useRef();
  const [tickValue, setTickValue] = useState({
    hours: 0,
    minutes: 0,
    seconds: 0
  });

  useEffect(() => {
    const currDiv = divRef.current;

    const didInit = tick => {
      tickRef.current = tick;
      Tick.helper.interval(function(){
        var d = Tick.helper.date();
        tick.value = {
          hours: d.getHours(),
          minutes: d.getMinutes(),
          seconds: d.getSeconds()
        };
        setTickValue(tick.value);
      });
    };

    Tick.DOM.create(currDiv, {
      value: tickValue,
      didInit,
      repeat: true,
    });

    return () => Tick.DOM.destroy(tickRef.current);
  }, []);

  useEffect(() => {
    if (tickRef.current) {
      tickRef.current.value = tickValue;
    }
  }, [tickValue]);

  return (
    <div ref={divRef} className="tick">
      <div data-layout="horizontal fit">
        <span data-key="hours" data-repeat="true" data-transform="pad(00) -> split -> delay">
          <span data-view="flip"></span>
        </span>
        <span className="tick-text-inline">:</span>
        <span data-key="minutes" data-repeat="true" data-transform="pad(00) -> split -> delay">
          <span data-view="flip"></span>
        </span>
        <span className="tick-text-inline">:</span>
        <span data-key="seconds" data-repeat="true" data-transform="pad(00) -> split -> delay">
          <span data-view="flip"></span>
        </span>
      </div>
    </div>
  )
};

export const DownClock = ({deadline}) => {
  const divRef = useRef();
  const tickRef = useRef();
  const [tickValue, setTickValue] = useState({
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0
  });

  useEffect(() => {
    const currDiv = divRef.current;

    const didInit = tick => {
      tickRef.current = tick;
      Tick.helper.interval(function(){
        let dn = moment();
        if (!deadline) deadline = (new Date()).getFullYear() + '-12-31 23:59:59';
        let dd = moment(deadline,'YYYY-M-D h:m:s');
        let diff = dd.diff(dn,'seconds');
        if (diff > 0) {
          let s = diff%60;
          let m = Math.floor(diff/60)%60;
          let h = Math.floor(diff/360)%60;
          let d = Math.floor(diff/360)%60;
          tick.value = {
            days: Math.floor(diff/86400),
            hours: Math.floor(diff/3600)%60,
            minutes: Math.floor(diff/60)%60,
            seconds: diff%60
          };
          setTickValue(tick.value);
        }
      });
    };

    Tick.DOM.create(currDiv, {
      value: tickValue,
      didInit,
      repeat: true,
    });

    return () => Tick.DOM.destroy(tickRef.current);
  }, [deadline]);

  useEffect(() => {
    if (tickRef.current) {
      tickRef.current.value = tickValue;
    }
  }, [tickValue]);

  return (
    <div ref={divRef} className="tick">
      <div data-layout="horizontal fit">
        <span data-key="days" data-view="flip" data-transform="pad(0)">
          <span/>
        </span>
        <span className="tick-text-inline">天</span>
        <span data-key="hours" data-repeat="true" data-transform="pad(00) -> split -> delay">
          <span data-view="flip"></span>
        </span>
        <span className="tick-text-inline">:</span>
        <span data-key="minutes" data-repeat="true" data-transform="pad(00) -> split -> delay">
          <span data-view="flip"></span>
        </span>
        <span className="tick-text-inline">:</span>
        <span data-key="seconds" data-repeat="true" data-transform="pad(00) -> split -> delay">
          <span data-view="flip"></span>
        </span>
      </div>
    </div>
  )
};